<template>
  <div class="card-wrapper" v-loading="loading">
    <div class="card-top-wrapper">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
        <el-breadcrumb-item>普通水卡</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cardexamine' }">线上实体卡申请记录</el-breadcrumb-item>
        <el-breadcrumb-item>审核</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <div class="card-user-wrapper">
      <div class="header-title">
        <el-icon class="el-icon-postcard"></el-icon>
        <span>用户信息</span>
      </div>
      <div class="ipt-row">
        <div class="ipt-cell">
          <span class="ipt-label">姓名</span>
          <el-input class="ipt" size="medium" v-model="card.full_name" disabled></el-input>
        </div>
        <div class="ipt-cell">
          <span class="ipt-label">手机号码</span>
          <el-input class="ipt" size="medium" v-model="card.tel" disabled></el-input>
        </div>
      </div>

      <div class="ipt-row">
        <div class="ipt-cell" v-if="card.IDcard">
          <span class="ipt-label">身份证号</span>
          <el-input class="ipt" size="medium" v-model="card.IDcard" disabled></el-input>
        </div>
        <div class="ipt-cell">
          <span class="ipt-label">园区名称</span>
          <el-input class="ipt" size="medium" v-model="card.village_name" disabled></el-input>
        </div>
      </div>
    </div>

    <div class="card-user-wrapper">
      <div class="header-title">
        <el-icon class="el-icon-bank-card"></el-icon>
        <span>水卡信息</span>
      </div>
      <div class="ipt-row">
        <div class="ipt-cell">
          <span class="ipt-label">水卡类型</span>
          <el-input class="ipt" size="medium" v-model="card.card_type" disabled></el-input>
        </div>
        <div class="ipt-cell">
          <span class="ipt-label">充值金额</span>
          <el-input class="ipt" size="medium" v-model="card.recharge_money" disabled></el-input>
        </div>
      </div>

      <div class="ipt-row">
        <div class="ipt-cell">
          <span class="ipt-label">押金</span>
          <el-input class="ipt" size="medium" v-model="card.card_deposit" disabled></el-input>
        </div>
        <div class="ipt-cell">
          <span class="ipt-label">审核状态</span>
          <el-select size="medium" class="ipt" v-model="audit" placeholder="请选择审核状态">
            <el-option :value="item.value" v-for="item in auditStatus" :label="item.name" :key="item.name"></el-option>
          </el-select>
        </div>
      </div>
      <div class="ipt-row">
        <div class="ipt-cell" v-if="audit==2">
          <span class="ipt-label">水卡卡号</span>
          <el-input placeholder="请输入水卡卡号" class="ipt" size="medium" v-model="card_number"></el-input>
        </div>
        <div class="ipt-cell">
          <span class="ipt-label">备注信息</span>
          <el-input placeholder="请输入备注信息" class="ipt" size="medium" v-model="note"></el-input>
        </div>
      </div>

      <div class="ipt-row">
        <el-button size="medium" @click="auditCard" class="audit-btn"  type="primary">提 交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  const auditStatus = [{
    value: '1',
    name: '审核中'
  }, {
    value: '2',
    name: '审核通过'
  }, {
    value: '3',
    name: '审核拒绝'
  }];
  export default {
    name: 'checkcard',
    data: function () {
      return {
        loading: false,
        card: {},//水卡信息
        audit: "", //审核状态\
        auditStatus,
        card_number: "",
        note: "",
      }
    },

    inject: ['reload'],
    methods: {

      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },



      auditCard() {
        if (this.audit === "") {
          this.$message.error("请选择审核状态");
          return false;
        }
        if (this.card_number=="" && this.audit == 2) {
          this.$message.error("请填写水卡号");
          return false;
        }
        this.$post({
          url: "Partner/WaterCard/operationAudit",
          data: {
            type: this.audit,
            id: this.$route.query.id,
            sn: this.card_number,
            note: this.note,
          }, success: res => {
            if (res.code > 0) {
              this.$message.success(res.message);
              setTimeout(() => {
                this.returnBack();
              }, 1500)
            } else {
              this.$message.error(res.message);
            }
          },
          error: e => {
            this.$message.error("网络错误");
          }
        })
      },


      getCardInfo() {
        this.loading = true;
        this.$post({
          url: 'Partner/WaterCard/getAccountWaterCardAudit',
          data: {
            id: this.$route.query.id
          },
          success: res => {
            this.loading = false;
            if (res.code > 0) {
              this.card = res.data;
              if (res.data.as_audit_status == 1) {
                this.auditStatus = [{
                  value: '2',
                  name: '审核通过'
                }, {
                  value: '3',
                  name: '审核拒绝'
                }]
              }
            } else {
              this.$message.error(res.message);
            }
          }, error: e => {
            this.loading = false;
            this.$message.error("网络错误");
          }
        })
      }
    },
    mounted() {
      this.getCardInfo();
    },

  }
</script>

<style scoped>
  .card-wrapper {
    /* position: absolute; */
    background: #FAFAFA;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }

  .card-top-wrapper {
    background: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 22px;
    position: relative;
  }

  .card-top-wrapper::after {
    border-bottom: 1px #CCCDCD solid;
    position: absolute;
    width: 98%;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }

  .header-title {
    color: #2C5585;
    padding: 20px 0 10px 18px;
    position: relative;
  }

  .header-title span {
    display: inline-block;
  }

  .header-title::after {
    position: absolute;
    content: "";
    width: 95%;
    border-bottom: 1px dotted #F2F2F2;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }

  .card-user-wrapper {
    background: #fff;
    margin-top: 15px;
    padding: 0px 0px 30px 0px;
  }

  .search-wrapper {
    padding: 15px 30px 20px;
    display: flex;
    width: 400px;
  }


  .ipt-row {
    display: flex;
    align-items: center;
    margin-top: 20px;
    width: 900px;
    justify-content: space-between;
    padding: 0 20px;
  }

  .ipt-cell {
    display: flex;
    align-items: center;
  }

  .ipt-label {
    display: inline-block;
    width: 80px;
    flex-shrink: 0;
    text-align: right;
    margin-right: 15px;
    font-size: 15px;
  }

  .ipt {
    width: 300px;
  }

  .audit-btn {

    margin-left: 90px;

  }


</style>